<template>
    <div class="singer">
       <ul class="singerul" @click="jump">
        <li v-for="id in singers" :key="id">
            <div class="head"> <img src="id.img"/></div><b>{{ id.name }}</b>
          <em>+关注</em>
          <p>{{ id.title }}</p>
          <ol>
            <li class="olli">
              <img src="id.imgs[]0" />
            </li>
             <li class="olli">
              <img src="id.imgs[]0" />
            </li>
             <li class="olli">
              <img src="id.imgs[]0" />
            </li>
             <li class="olli">
              <img src="id.imgs[]0" />
            </li>
          </ol>
        </li>
       </ul>
    </div>
</template>

<script>
import { getsingers } from '@/api/singer'
export default {
  name: 'Singer',
  data () {
    return {
      singers: []
    }
  },
  methods: {
    jump () {
      this.$router.push('/singermine/')
    }
  },
  created () {
    getsingers()
      .then(res => {
        this.singers = res.list
        console.log(res.list)
      })
      .catch(err => console.log('异常：', err))
  }
}
</script>

<style lang="scss" scoped>
.singerul{
  list-style: none;
  li{
    width: 300px;
    height: 175px;
    border: 1px solid red;
    box-shadow: white;
    border-radius: 10px;
    margin: 0 auto;
    background-color: grey;
    .head{
      width: 40px;
      height: 40px;
      border: 1px solid green;
      border-radius: 50%;
      margin: 10px 10px;
      background-color: red;
    }
    b{
      float: left;
      margin: -40px 60px;
    }
    em{
      float: right;
      margin: -40px 10px;
      font-style: normal;
    }
    p{
      margin: 10px;
    }
    ol{
      list-style: none;
      display: flex;
      flex-direction:row;
      margin: 10px -10px;
      li{
        width: 40px;
        height: 40px;
        border: 1px solid blue;
        border-radius: 5px;
        margin: 10px 20px;
        background-color: yellowgreen;
      }
    }
  }
}
</style>
